## -*- coding: utf-8 -*-
<%inherit file="/base/blog_base.html"/>
<%namespace file="/derived/blog/blog.html" import="blog_show, comment_show" />
<%namespace file="/component/utils.html" import="paginate" />

<div class="blog_main">
  ${blog_show(c.post, True)}
  <div class="blog_comment" id="commentsWrapper">
    <h5>评论</h5>
    <a name="comments" id="comments"></a>
    % if len(c.comments):
        % for comment in c.comments:
            ${comment_show(comment)}
        % endfor

        % if c.comments.last_page > 1:
            ${paginate(c.comments, request.environ.get('PATH_INFO'), '#comments')}
        % endif
     % endif
  </div>
  <div class="blog_comment">
    <h5>发表评论</h5>
    % if not h.auth.authorized(h.auth.is_valid_user):
    <span style="color: red;">您尚未登录，只能匿名发表评论！<a href="${h.url_for_www(controller='account', action='register')}">点击这里注册</a></span>
    % endif
    ${h.form('', method='post', id='comment_form')}
    <table width="100%">
      <tbody>
        <tr><td id="errorWrapper"></td></tr>
        <tr>
          <td id="editWrapper">${h.textarea("content", "", style='height:200px;width:500px;')}</td>
        </tr>
        <tr>
          <td style="padding-top:10px;"> 提示：内容长度最大5千汉字，如果出现超长，请分开发布 </td>
        </tr>
        <tr>
          <td style="padding:15px 0px 25px 0px"><input id="btnSubmit" class="submit" type="button" value="　发表　" /></td>
        </tr>
      </tbody>
    </table>    
    ${h.end_form()}
  </div>
</div>

<%def name="head()">
  ${parent.head()}
  ${h.javascript_link(h.url_for('/js/jquery.form.js'))}
  ${h.javascript_link(h.url_for('/js/jquery.validate.min.js'))}
  ${h.javascript_link(h.url_for('/js/nicEdit.js'))}
	
  <script type="text/javascript">
  var comment_content;
  var contentTextArea;
  $(document).ready(function() {
	  $("#comment_form").validate({
		onsubmit: false,
		onfocusout: false,
		onkeyup: false,
		rules: {
		  content: {
		    required: true,
			rangelength: [1, 5000]
		  }
	    },
		messages: {
          content: {
  		    required: "请提供您的评论",
  		    rangelength: jQuery.format("请输入{0}到{1}个文字")
          }
		},
		errorPlacement: function(error, element) {
			error.appendTo(element.parent("td").parent("tr").prev("tr").children("td")[0]);
			error.delay(3000, function() {
				error.remove();
			});
			//error.fadeIn('slow').animate({opacity: 1.0}, 3000).fadeOut('slow');
			//error.appendTo($('#errorWrapper'));
		},
		// set this class to error-labels to indicate valid fields
		success: function(label) {
		  // set &nbsp; as text for IE
		  //label.html("&nbsp;").addClass("checked").appendTo(label.parent("td").parent("tr").prev("tr").children("td")[1]);
		  label.remove();
		}
	  });

	  $('#btnSubmit').click(function(e) {
		  var data = contentTextArea.nicInstances[0].getContent();
		  if ('<br>' == data.toLowerCase()) {
			  data = '';
		  }
		  $('#content').val(data);
			if ($("#comment_form").validate().element("#content")) {
				comment_content = $('#content').val();
				$('#content').val('');
                contentTextArea.nicInstances[0].setContent('');
			    $.post("${h.url_for(controller='comment', action='create', id=c.post.id, sub_domain=c.userInfo.userName)}",
			        {content:comment_content},
			        showResponse, 
			        "json");			
			}	
		  });

	  contentTextArea = new nicEditor({maxHeight : 200, 
		  iconsPath : "${h.url_for('/js/nicEditorIcons.gif')}",
		  buttonList : ['bold','italic','underline','left','center','right','ol','ul','fontSize','indent','outdent','image','link','unlink','forecolor']
			}).panelInstance('content');
    
  });

  function showResponse(data, textStatus)  {
	  if (data.flag == 1) {
		  $('#commentsWrapper').append(genCommentDiv(data));
	  } else {
		  var l = $('<label class="error">' + data.info + '</label>');
		  l.appendTo($('#errorWrapper'));
		  l.delay(3000, function() {
			  l.remove();
		  });		  
	  }
  } 

  function genCommentDiv(data, textStatus)  {
	  var divStr;
	  divStr = '<div><div class="comment_title"> ';
	  divStr = divStr + data.userInfo + ' ';
	  divStr = divStr + data.createDate + ' ';
	  divStr = divStr + '</div><div class="comment_content"> ';
	  divStr = divStr + comment_content + ' ';
	  divStr = divStr + '</div></div> ';
	  return divStr;
  }
  	
  </script>	
</%def>
